<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <#include "/resources/share/common/_commresource.html"/> 
    <title>随意论坛</title>
</head>

  <body>
    <#include "/resources/share/common/_commtop.html"/> 
<!-- start site's main content area -->
<section class="content-wrap">
<div class="container">
<div class="row">
<main class="col-md-8 main-content">

<!-- 主内容 start -->
<article id="${sectionPage.getList().get(0).getLong('section.id')}" class="post">
    <div class="post-head">
        <h1 class="post-title"><a href="#">${sectionPage.getList().get(0).getStr("section.name")} </a></h1>
        <div class="post-meta">
            <span class="author">作者：<a href="#">${sectionPage.getList().get(0).getStr("user.nickName")}</a></span> •
            <time class="post-date" datetime="2016年4月28日星期四上午10点14分" title="2016年4月28日星期四上午10点14分">${sectionPage.getList().get(0).getStr("user.nickName")}</time>
        </div>
    </div>
    <div class="featured-media">
        <a href="#"><img src="#" alt="#"></a>
    </div>
    <div class="post-content">
        <p>${sectionPage.getList().get(0).getStr("section.context")}</p>
    </div>
</article>
<!-- 主内容 end -->

<!-- 已回复内容 start -->
<#list sectionDetailPage.getList() as x>
<article id="${sectionPage.getList().get(0).getLong('section.id')}" class="post">
    <div class="col-md-12">
		<div class="col-sm-3">
		<#if x.getStr( 'user.headPortraitImg')==null>
		<img src="${contextPath}/resources/web/image/userdefualt.png" class="media-object imgheadcss" style="width:100%;height:50%;margin-top:0 0 0 0;"/>
		<#else>
		<img src="${x.getStr('user.headPortraitImg')}" class="media-object imgheadcss" style="width:100%;height:50%;margin-top:0 0 0 0;"/>
		</#if>
		
        <p>${sectionPage.getList().get(0).getStr("section.name")} </p>
		</div>
		<div class="col-sm-9">
			<div class="col-sm-12" style="height:5%;">
				<time class="post-date" datetime="2016年4月28日星期四上午10点14分" title="2016年4月28日星期四上午10点14分">${sectionPage.getList().get(0).getStr("user.nickName")}</time>
        	</div>
        	<div class="col-sm-12">
        	${x.getStr("sectionDetail.context")}
        	</div>
		</div>
	</div>
</article>
</#list>
<!-- 已回复内容 end -->

<!-- 分页 start -->
<!-- 不同页面传参不一致需要分开放 -->
<#include "/resources/share/common/_paginateDeatil.html"/>
<!-- 分页 end -->

<form class="form-horizontal templatemo-signin-form" role="form" id="sectiondetailform" action="${contextPath}/sectiondetail/save/" method="post" enctype="multipart/form-data">
<!-- 隐藏属性start -->
<input type="hidden" id="sectionid" name="sid" value="${sectionPage.getList().get(0).getLong('section.id')}" />
<input type="file" id="contextFile" onchange="readFile(this)" style="display: none"/>
<input type="hidden" id="sectionImg" name="section_img" value="" /> 
<input type="hidden" name="context" id="SummernoteCode"/>
<!-- 隐藏属性end -->

<!-- 回复内容 start -->
<div class="col-sm-12" style="margin-bottom: 5%;">
<div id="summernote"></div>
<script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });

    $('#summernote').summernote({
    	  lang: 'zh-CN',
    	  //height: 300,                 // set editor height
    	  minHeight: 300,             // set minimum height of editor
    	  maxHeight: null,             // set maximum height of editor
    	  focus: false                  // set focus to editable area after initializing summernote
    	});
    $('#summernote').summernote({  
        height: "500px",  
        callbacks: {  
            onImageUpload: function(files) { //the onImageUpload API  
                img = sendFile(files[0]);  
        }  
    }  
    });  

    function sendFile(file) {  
        data = new FormData();  
        data.append("file", file);  
        console.log(data);  
        $.ajax({  
            data: data,  
            type: "POST",  
            url: "{:U('Test/upload')}",  
            cache: false,  
            contentType: false,  
            processData: false,  
            success: function(url) {  
                  $("#summernote").summernote('insertImage', url, 'image name'); // the insertImage API  
            }  
        });  
    }  
	
	function getCode(){
		var markupStr = $('#summernote').summernote('code');
		document.getElementById("SummernoteCode").value = markupStr;
	}
	function setCode(markupStr){
		//var markupStr = 'hello world';
		$('#summernote').summernote('code', markupStr);
	}
	setCode('${context}');
	
	function readFile(obj) {
		var file = obj.files[0];
		//判断类型是不是图片  
		if(!/image\/\w+/.test(file.type)) {
			alert("请确保文件为图像类型");
			return false;
		}
		//上次修改时间  
		//alert(file.lastModifiedDate); 
			//名称  
		//alert(file.name); 
		//大小 字节  
		var fsize = file.size; 
		//判断文件大小
		if(fsize/1024 >5000){
			alert("上传图片大小不能大于5M");
			return false;
		}
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(e) { 
			document.getElementById("sectionImg").value=this.result;
			document.getElementById("sectionImgSrc").src = this.result;
		}
	}

function getFileUpload(){
document.getElementById("contextFile").click();
}
  </script>
<!-- 回复内容end -->

<!-- 验证码 start-->
		<div class="form-group">
				<div class="col-md-3" style="text-align: center;">
				<img src="${contextPath}/common/captcha" onclick="getcaptcha(this);"/>
				</div>
				<div class="col-sm-5">
				<input type="text" id="captcha" name="captcha" placeholder="验证码" />
				</div>
				<div class="col-sm-4"><button type="submit" class="btn btn-primary" type="submit" style="width:60%; margin-right:5%;" onclick="getCode();">发送</button>
				</div>
		</div>
<!-- 验证码 end -->
</div>	
</form>

<script>
		$(document).ready(function() {
			$('#summernote').summernote();
		});

		$('#summernote').summernote({
			lang: 'zh-CN',
			minHeight: 300,
			maxHeight: null,
			focus: false
		});
	function getcaptcha(obj){
		obj.src="${contextPath}/common/captcha/"+new Date();
	}
	</script>
	

	<script type="text/javascript">
		$(document).ready(function() {
			/**
			 * 下面是进行插件初始化
			 * 你只需传入相应的键值对
			 * */
			$('#sectiondetailform').bootstrapValidator({
				message : 'This value is not valid',
				feedbackIcons : {/*输入框不同状态，显示图片的样式*/
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {/*验证*/
					captcha : {
						message : '验证码无效',
						validators : {
							notEmpty : {
								message : '验证码不能为空'
							},
							regexp : {/* 只需加此键值对，包含正则表达式，和提示 */
								regexp : /^[a-zA-Z0-9_\.]+$/,
								message : '只能是数字和字母_.'
							},
							stringLength : {
								min : 4,
								max : 4,
								message : '验证码只能是4位'
							},
							threshold : 4, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
							remote : {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
								url : '${contextPath}/common/checkVCode',//验证地址
								message : '验证码错误',//提示消息
								delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
								type : 'POST'
							}
						}
					}
				}
			});
		});
	</script>	
<!-- 回复内容 end -->
</main>
<#include "/resources/share/common/_commright.html"/>
            </div>
        </div>
    </section>

<!-- 页脚 start -->
<#include "/resources/share/common/_friendshiplink.html"/>
<!-- 页脚 end -->
</body>
</html>